<template>
  <div>
    <template v-for="(item, index) in designerJson">
      <div class="contanier" @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)">
        <div class="designer">
          <H5DesignerItem :designerData="item" :updateColumn ="updateColumn" />
        </div>
        <div v-show="item.isShowRight" class="right">
          <div class="right-action" @click="upMove(item, index)">
            <img class="edit-icon up" src="../../assets/image/icon-arrow-back.png" alt="" />
          </div>
          <div class="right-action" @click="downMove(item, index)">
            <img class="edit-icon down" src="../../assets/image/icon-arrow-back.png" alt="" />
          </div>
          <div class="right-action" @click="addContent(item)">
            <img class="edit-icon" src="../../assets/image/icon-add.png" alt="" />
          </div>
          <div class="right-action" @click="editColumn(item)">
            <img class="edit-icon" src="../../assets/image/icon-edit.png" alt="" />
          </div>
          <div class="right-action" @click="deleteColumn(item, index)">
            <img class="edit-icon" src="../../assets/image/icon-delete.png" alt="" />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { computed, defineComponent, ref, watch, PropType } from 'vue';
import { ElMessage } from "element-plus";
import H5DesignerItem from './H5DesignerItem.vue';

const props = defineProps({
  attr: {
    type: [],
    default: []
  },
  addColumnContent: {
    // 添加栏目内容 “+”
    type: Function
  },
  editColumn: {
    // 编辑栏目
    type: Function
  },
  deleteColumn: {
    //删除栏目
    type: Function
  },
  modifyColumnContent: {
    //添加或者更新栏目内容
    type: Function
  }
});
const designerJson = ref([]);
watch(
  () => props.attr,
  () => {
    designerJson.value = props.attr;
    console.log('H5Designer', designerJson.value);
  }
);

const mouseenter = (item) => {
  item.isShowRight = true;
};

const mouseleave = (item) => {
  item.isShowRight = false;
};

// 上移
const upMove = (item, index) => {
  if (index === 0) {
    ElMessage({
    message: '已经在最顶部喽~',
    type: 'warning',
  })
    return
  }
  designerJson.value.splice(index, 1);
  designerJson.value.splice(index - 1, 0, item);
};

// 修改栏目
const editColumn = (item) => {
  console.log('修改栏目');
  if (props && props.editColumn) {
    props.editColumn(item);
  }
};

// 下移
const downMove = (item, index) => {
  if (index === designerJson.value.length - 1) {
    ElMessage({
    message: '已经在最底部喽~',
    type: 'warning',
  })
    return
  }
  designerJson.value.splice(index, 1);
  designerJson.value.splice(index + 1, 0, item);
};

// 添加栏目内容
const addContent = (item) => {
  console.log('添加内容');
  if (props && props.addColumnContent) {
    props.addColumnContent(item);
  }
};

// 删除
const deleteColumn = (item, pos) => {
  // designerJson.value.splice(pos, 1);
  if (props && props.deleteColumn) {
    props.deleteColumn(item)
  }
};


//添加或者更新栏目内容
const updateColumn = (data) => {
  console.log('updateColumn--H5Designer', data);
  if (props && props.modifyColumnContent) {
    props.modifyColumnContent(data)
  }
};
</script>
<style lang="scss" scoped>
.contanier {
  margin-bottom: 20px;
  width: 341px;
  display: flex;
  align-items: center;

  .designer {
    width: 290px;
  }

  .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 31px;
    background: #fff;
    color: #979797;
    border-radius: 6px;
    margin-left: 25px;
    padding: 5px 0;
    .right-action {
      cursor: pointer;
    }

    .edit-icon {
      width: 20px;
      margin-top: 10px;
    }

    .up {
      transform: rotate(90deg);
    }

    .down {
      transform: rotate(270deg);
    }
  }
}
</style>
